<template>
  <view v-if="showSwiper" class="swiper-container">
    <nut-swiper 
      class="w-375px" 
      :init-page="0" 
      :auto-play="3000" 
      pagination-visible 
      pagination-color="#059669"
      pagination-unselected-color="#808080"
    >
      <nut-swiper-item 
        v-for="(item, index) in swiperList" 
        :key="index" 
        class="w-375px swiper_item"
        @click="toInformation(item.toInformation)"
      >
        <image 
          :src="useImage(item.pic)" 
          alt="" 
          class="w-375px swiper_img" 
          mode="aspectFit" 
          draggable="false" 
        />
      </nut-swiper-item>
    </nut-swiper>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { useNurseSwiper } from '../services/SwiperService';
import { useImage } from '@/hooks';

// Props
const props = defineProps({
  showSwiper: {
    type: Boolean,
    default: true
  }
});

// 轮播图数据
const swiperList = ref<any[]>([]);
const { list: swiper_list } = useNurseSwiper();

/**
 * 获取轮播图数据
 */
const getSwiperData = async () => {
  try {
    const { error, success } = await swiper_list();
    if (!error && success?.records) {
      swiperList.value = success.records;
    } else {
      // console.warn('轮播图数据获取失败或为空');
      swiperList.value = [];
    }
  } catch (error) {
    // console.error('获取轮播图数据失败:', error);
    swiperList.value = [];
  }
};

/**
 * 轮播图点击事件
 */
const toInformation = (toInformation: string) => {
  if (toInformation) {
    Taro.navigateTo({
      url: `/package-other/articles/index?id=${toInformation}`
    });
  }
};

onMounted(() => {
  getSwiperData();
});
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 375px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f39c12 60%, #2ecc71 80%, #9b59b6 70%);
}

.swiper_item {
  width: 375px;
}

.swiper_img {
  width: 375px;
  height: auto;
}
</style>
